<template>
	<view class="card-detail">
		<view class="top">
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				延期套餐
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;" @click="exuclick">
				<view  v-if="data.type == 3"
					style="width: 60%;height: 48rpx;float: left;font-size: 24rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					<!-- <input type="number" placeholder="选择额度" style="margin-top: 30rpx;font-size: 26rpx;" v-model="exu"
						:disabled='true' @click="exuclick"> -->
					延期额度{{days}}
				</view>
				<view  v-if="data.type == 4 || data.type == 1"
					style="width: 60%;height: 48rpx;float: left;font-size: 24rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					延期次数{{days}}
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;" v-if="data.type == 3">
					天
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;"
					v-if="data.type == 4 || data.type == 1">
					天
				</view>
			</view>
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;" v-if="shift_id != ''">
				手续费
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;" v-if="shift_id != ''">
				<!-- <view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 40rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					{{data.production}}
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;">
					元
				</view> -->
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 40rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					{{itemarray.price}}
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;" v-if="data.type == 3">
					元
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;"
					v-if="data.type == 4 || data.type == 1">
					元
				</view>
			</view>
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				开始时间
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;">
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 26rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					{{data.enddate}}
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;">
					
				</view>
			</view>
			<view style="margin-top: 30rpx;font-weight: 700;font-size: 30rpx;">
				延期至
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm="timelist"
				@cancel="show = false"></u-datetime-picker>
				<!-- @click="show = true" -->
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;" >
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 26rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					<!-- <input type="text" disabled='false' placeholder="请选择日期" v-model="datatime" style="margin-top: 30rpx;"
						placeholder-style="font-size: 26rpx"> -->
					{{datatimes}}
				</view>
				<!-- <view class="" style="width: 10%;height: 50rpx;float: right;margin-top: 36rpx;">
					<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
				</view> -->
			</view>
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				延期说明
			</view>
			<view style="width: 100%; height: 320rpx;background: #fff; padding: 20rpx 30rpx; font-size: ;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px;">
				<!-- <view style="width: 100%;height: 40rpx;font-size: 26rpx;
								font-weight: 500;
								color: #333333;"></view> -->
				<textarea  class="input-textare" height="50rpx" margin-top='20rpx'
					placeholder-style="font-size: 26rpx" v-model="order_remarks" />
			</view>
			
			<view style="margin-top: 10rpx;font-size: 24rpx;color: #797979;">
				注：延期只修改有效期，卡内余额不变。
			</view>
			<view class="" style="width: 92%;height: 100rpx;position: absolute;bottom: 10rpx;">
				<button style="background-color: #2F75FA; color: #fff;border-radius: 50rpx 50rpx;" @click="yanqi"
					type="default">确认延期</button>
			</view>
		</view>

		<u-popup @touchmove.stop :show="showAmount" @close="closeAmount" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">
			<view class="store-popup">
				<view class="title flex-between">
					<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
						@click="tabClick"></u-tabs>
					<u-icon @click="closeAmount1" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="list-2">
					<view class="item flex-align" v-for="(item,index) in delist" :key="index" @click="jine(item)">
						<view class="item-1">
							<view class="price"> <text>{{item.days}}天</text> </view>
							<view class="price-1" v-if="data.type == 3">延期天数</view>
							<view class="price-1" v-if="data.type == 4 || data.type == 1">延期天数</view>
						</view>
						<view class="item-2">
							<!-- <view class="info-1" v-if="data.type == 3">延期额度:{{item.days}}</view>
							<view class="info-1" v-if="data.type == 4 || data.type == 1">延期次数:{{item.days}}</view> -->
							<view class="info-2">手续费：{{item.price}}</view>
							<view class="info-2"style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">使用说明：</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const index = require('@/api/personal/index.js')
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				data: {},
				cardno: '',
				id: 0,
				show: false,
				value1: Number(new Date()),
				datatime: '',
				showAmount: false,
				delist: [],
				itemarray: {},
				shift_id: "",
				days: '',
				deduction: '',
				datalist:{},
				classNum: 0,
				datatimes:"",
				order_remarks:'',
				card_id:''
				
			}
		},
		onLoad(options) {
			this.cardno = options.cardno
			this.card_id = options.card_id
			this.getMyCardDetail()
		},
		methods: {
			// 关闭充值卡/取消选中充值卡
			closeAmount1() {
				this.showAmount = false;
			},
			closeAmount() {
				this.showAmount = false;
			},
			jine(item) {
				console.log(item)
				let that = this
				this.showAmount = false
				this.itemarray = item
				this.shift_id = item.id
				this.days = item.days
				this.deduction = item.deduction
				
				
				// 创建一个日期对象
				var date = new Date(this.data.enddate);
				// 获取当前日期的时间戳
				var timestamp = date.getTime();
				// 将时间戳加上指定的天数（这里假设要加上的天数为 7）
				var newTimestamp = timestamp + (this.days * 24 * 60 * 60 * 1000);
				// 根据新的时间戳创建日期对象
				var newDate = new Date(newTimestamp);
				// 输出新的日期
				console.log(newDate,9999);
				
				
				let dates = new Date(newDate);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = dates.getFullYear();
				let MM = dates.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = dates.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = dates.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = dates.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = dates.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s,'66666')
				this.datatimes = y + '-' + MM + '-' + d
				
			},
			tabClick(e) {
			
			},
			async exuclick() {
				this.showAmount = true;
				let params = {
					id: this.data.id,
					venue_id:this.data.venue_id,
				}
				let res = await venues.yanqi_set_meal(params)
				if (res.code === 1) {
					this.delist = res.data
				}
			},
			timelist(value) {
				this.show = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s)
				this.datatime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			// 关闭时间弹窗
			showclose() {
				this.show = false
			},
			
			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					id:this.card_id
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
					
					
				}
			},
			
			// 获取我的卡包详情
			async yanqi() {
				let that = this
				let payWaitTime = '00:15:00'
				if (that.datatimes  == '') {
					uni.showToast({
						title: '请输入延期时间',
						icon: 'none'
					})
					return
				}
				if (that.order_remarks  == '') {
					uni.showToast({
						title: '请输入延期说明',
						icon: 'none'
					})
					return
				}
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					id: this.data.id, //卡id
					// transfer_user: this.haoyouid, //好友id
					remark: this.order_remarks, //备注
					// price: '0',
					venue_id: this.data.venue_id,
					pay_method: '5',
					// order_money: '0',
					// phone: this.haoyouphone, //好友手机号
					// to_times: this.exus, //次数
					// to_money: this.exu, //钱
					// shift_id: this.shift_id,
					rule_id:this.shift_id,
				}
				let res = await venues.yanqi(params)
				if (res.code === 1) {
					this.resultlist = res.data.info
					this.datalist = res.data.info
					if (res.data.info.order_money >= '0.01') {
						uni.navigateTo({
							url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
								that.datalist.order_money +
								"&payWaitTime=" +
								payWaitTime +
								"&venue_id=" +
								that.datalist.venue_id +
								"&order_id=" +
								that.datalist.order_id +
								"&orderid=" +
								that.datalist.orderid +
								"&order_type=" +
								that.datalist.ordertype +
								"&chaoshitype=" +
								2 + "&classNum=" +
								that.classNum +
								"&train_price=" +
								that.datalist.order_money +
											"&goods_id=" +
											that.datalist.card_id,
						});
					} else {
						this.moniPay()
					}
				} else {
					uni.showToast({
						title: res.info,
						icon: 'none'
					})
				}
			},
			// order_type 21挂失   22补卡  23  延期
			async moniPay() {
				var nowdate = new Date().valueOf();
				var that = this;
				let params = {
					app_id: that.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id: that.data.id,
					venue_id: that.data.venue_id,
					price: '0', //价格
					pay_method: 1, //支付方式
					order_money: '0', //应付
					remark: that.remark, //备注
					add_time: nowdate,
					out_trade_no: that.resultlist.order_id,
					transaction_id: 'ZF001',
					goods_id: '1',
					order_type: that.resultlist.ordertype
				};
				let res = await venues.moniPay(params);
				if (res.code == 1) {
					uni.navigateTo({
						url: '/pages/personal/personal?backUp=1'
					})
			
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #eeeeee;
		height: 100vh;
		
		.store-popup {
			padding: 20rpx 0;
		
			// .list {
			.scroll-view_H {}
		
			.item {
				margin-top: 30rpx;
		
				.info {
					margin-left: 20rpx;
		
					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}
		
					.phone {
						font-size: 24rpx;
						font-weight: 500;
						color: #bebebe;
						margin-top: 10rpx;
					}
				}
			}
		
			// }
			.title {
				padding: 0px 30rpx;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #cccccc;
				font-weight: bold;
		
				.clo {
					color: #2f75fa;
				}
			}
		
		
			.list-2 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;
		
				.item {
					margin-top: 30rpx;
					height: 160rpx;
					padding: 0px 30rpx;
					overflow: hidden;
		
					.item-1 {
						background: rgba(47, 117, 250, 0.2);
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						justify-content: center;
		
						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #2f75fa;
		
							text {
								font-size: 50rpx;
								font-weight: 700;
							}
						}
		
						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: rgba(47, 117, 250, 0.6);
							margin-top: 10rpx;
						}
					}
		
		
		
					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;
		
						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
							margin-bottom: 10rpx;
						}
		
						.info-2 {
							font-size: 24rpx;
							margin-bottom: 8rpx;
							color: #bebebe;
						}
		
						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}
		}

		.top {
			padding: 30rpx;
		}
	}
</style>